<template>
  <el-card class="box-card" style="width: 100%;height: 100%">
    <div slot="header" class="clearfix">
      <span style="font-weight:bold;font-size: 20px">通过的任务</span>
      <el-input style="width:200px;margin:0 10px 0 20px"
                placeholder="请输入内容"
                prefix-icon="el-icon-search"
                v-model="inputSelect">
      </el-input>

      <el-button round @click="search">搜索</el-button>

      <el-button style="float: right; padding: 3px 0" type="text" @click="refresh()">
        <i class="el-icon-refresh-left"><span> 刷新页面</span></i>
      </el-button>
    </div>

    <el-dialog width="40%" title="任务详情" :visible.sync="dialogTableVisible">
      <el-form label-position="left" inline class="demo-table-expand">
        <el-row :gutter="60">
          <el-col :span="12">
            <el-form-item label="任务标题：">
              <span>{{ taskData.taskTitle }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="招募职位：">
              <span>{{ taskData.talentCategories }}</span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="60">
          <el-col :span="12">
            <el-form-item label="需要技能：">
              <span>{{ taskData.technology }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="工作周期：">
              <span>{{ taskData.workCycle }}天</span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="60">
          <el-col :span="12">
            <el-form-item label="薪水：">
              <span>{{ taskData.salary }}元</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="工作地点：">
              <span>{{ taskData.workPlace }}</span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="60">
          <el-col :span="12">
            <el-form-item label="发布人：">
              <span>{{ taskData.publishingName }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="手机号：">
              <span>{{ taskData.publishingPhone }}</span>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

    </el-dialog>



    <el-table
        :data="tableData"
        style="width: 100%">
      <el-table-column
          prop="mandateTitle"
          label="任务标题"
          width="270px"
      >
      </el-table-column>
      <el-table-column
          prop="isSuerName"
          label="发布人姓名">
      </el-table-column>
      <el-table-column
          prop="isSuerTelephone"
          label="发布人手机号"
          width="200px"
      >
      </el-table-column>
      <el-table-column
          prop="talentCategory"
          label="招募职位"
          width="200px"
      >
      </el-table-column>
      <el-table-column
          prop="skillsRequirements"
          label="要求技能"
          width="380px"
      >
      </el-table-column>
      <el-table-column
          prop="salary"
          label="酬劳/元"
          width="130px"
      >
      </el-table-column>

      <el-table-column
          prop="workCycle"
          label="项目周期/天"
          width="130px"
      >
      </el-table-column>

      <el-table-column
          label="操作"
          width="120px">
        <template slot-scope="scope">
          <el-button @click="handleClick(scope.row.id)" type="primary"><i class="el-icon-user"></i> 查看</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination style="margin-top: 20px"
                   @current-change="handleCurrentChange"
                   background
                   :current-page.sync="currentPage"
                   layout="prev, pager, next"
                   :total=total>
    </el-pagination>
  </el-card>
</template>

<script>


export default {
  name: "adminPassTask",
  data() {
    return {
      dialogTableVisible: false,
      inputValue: '',
      inputSelect: '',
      tableData: [],
      taskData: {},
      total: 0,
      currentPage: 1
    }
  },
  methods: {
    handleClick(taskId) {
      this.dialogTableVisible = true;
      this.getTaskData(taskId)

    },
    refresh() {
      this.initList();
    },
    handleCurrentChange(newPage) {
      this.getData(newPage, this.inputValue)
    },
    initList() {
      this.currentPage = 1
      this.inputValue = ''
      const loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
      this.getData(this.currentPage, '')
      loading.close()

    },
    search() {
      this.currentPage = 1
      this.inputValue = this.inputSelect
      const loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
      this.getData(this.currentPage, this.inputValue)
      loading.close()
    },

    async getData(pageNum, keyword) {
      const {data: res} = await this.$http.get('/ATC/getAuditedTasks', {
        params: {
          pageNum: pageNum,
          pageSize: 10,
          keyword: keyword
        }
      })
      this.total = res.content.total
      this.tableData = []
      this.tableData = res.content.list
    },
    async getTaskData(taskId) {
      const {data: res} = await this.$http.get('/task/' + taskId)
      this.taskData = res.content
    },


  },
  mounted() {
    this.initList()
  }
}
</script>

<style>

</style>